<template>
  <div 
    class="decorative-card" 
    :class="[
      `size-${size}`,
      `style-${cardStyle}`,
      { hoverable, loading }
    ]"
  >
    <!-- 装饰元素 -->
    <div v-if="showDecorations" class="decorations">
      <div class="decoration decoration-1"></div>
      <div class="decoration decoration-2"></div>
      <div class="decoration decoration-line"></div>
    </div>

    <!-- 主要内容 -->
    <div class="card-content">
      <!-- 头部区域 -->
      <header v-if="$slots.header" class="card-header">
        <slot name="header"></slot>
      </header>

      <!-- 主体内容 -->
      <main class="card-body">
        <slot></slot>
      </main>

      <!-- 底部区域 -->
      <footer v-if="$slots.footer" class="card-footer">
        <slot name="footer"></slot>
      </footer>
    </div>

    <!-- 加载状态遮罩 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults } from 'vue'

interface Props {
  size?: 'sm' | 'md' | 'lg'
  cardStyle?: 'default' | 'gradient' | 'minimal' | 'outlined'
  hoverable?: boolean
  showDecorations?: boolean
  loading?: boolean
}

withDefaults(defineProps<Props>(), {
  size: 'md',
  cardStyle: 'default',
  hoverable: true,
  showDecorations: true,
  loading: false
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.decorative-card {
  position: relative;
  overflow: hidden;
  transition: var(--transition-normal);
  
  // 基础卡片样式
  @include card-base;
  
  // 尺寸变体
  &.size-sm {
    padding: var(--space-md);
    border-radius: var(--border-radius-md);
  }
  
  &.size-md {
    padding: var(--space-lg);
    border-radius: var(--border-radius-lg);
  }
  
  &.size-lg {
    padding: var(--space-xl);
    border-radius: var(--border-radius-xl);
  }
  
  // 样式变体
  &.style-gradient {
    @include gradient-primary;
    color: white;
    
    .card-content {
      position: relative;
      z-index: 2;
    }
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      z-index: 1;
    }
  }
  
  &.style-minimal {
    background: transparent;
    border: none;
    box-shadow: none;
    
    .decorations {
      display: none;
    }
  }
  
  &.style-outlined {
    background: transparent;
    border: 2px solid var(--primary-color);
    box-shadow: none;
    
    &:hover {
      background: rgba(102, 126, 234, 0.05);
    }
  }
  
  // 悬浮效果
  &.hoverable:hover:not(.loading) {
    @include card-hover;
  }
  
  // 加载状态
  &.loading {
    pointer-events: none;
    
    .card-content {
      opacity: 0.6;
    }
  }
}

// 装饰元素
.decorations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.decoration {
  position: absolute;
  border-radius: 50%;
  
  &.decoration-1 {
    @include floating-decoration(60px, rgba(102, 126, 234, 0.1));
    top: 10%;
    right: 10%;
    animation-delay: 0s;
  }
  
  &.decoration-2 {
    @include floating-decoration(40px, rgba(255, 105, 180, 0.1));
    bottom: 15%;
    left: 15%;
    animation-delay: 2s;
  }
  
  &.decoration-line {
    width: 80px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(45deg, rgba(102, 126, 234, 0.2), rgba(255, 105, 180, 0.2));
    top: 20%;
    right: 20%;
    transform: rotate(45deg);
    animation: float 8s ease-in-out infinite;
    animation-delay: 1s;
  }
}

// 内容区域
.card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-header {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-color);
}

.card-body {
  flex: 1;
}

.card-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-color);
}

// 加载遮罩
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @include center-flex;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 暗黑模式适配
[data-theme="dark"] .decorative-card {
  &.style-gradient {
    &::before {
      background: rgba(0, 0, 0, 0.2);
    }
  }
  
  .loading-overlay {
    background: rgba(26, 32, 44, 0.8);
  }
}

// 响应式适配
@include respond-below(md) {
  .decorative-card {
    &.size-lg {
      padding: var(--space-lg);
    }
    
    &.size-md {
      padding: var(--space-md);
    }
  }
  
  .decoration {
    &.decoration-1 {
      width: 40px;
      height: 40px;
    }
    
    &.decoration-2 {
      width: 30px;
      height: 30px;
    }
    
    &.decoration-line {
      width: 60px;
    }
  }
}
</style>